<template>
  <div class="label case childPage">
    <div class="head">
      <Header :next="'label'"/>
    </div>
    <div class="block_1 block">
      <div class="block_content">
        <div class="bc_text bc_1">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_1_text">
              <template>
                <h1 :key="item">智能标签设计器</h1>
                <h4 key="2" class="mt40">
                  利用3D模型测量的数据，我们可以根据场景及品牌规则
                </h4>
                <h4 key="3" class="mt20">
                  自动生成标签，说明书外包装等资料
                </h4>
                <h4 key="4" class="mt20">
                  并可实时修改，实时渲染预览
                </h4>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_two/1.png')"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_1_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="foot">
      <Footer />
    </div>
  </div>
</template>
<script>
  import Header from "@/components/header";
  import Footer from "@/components/footer";
  import $ from "jquery";
  import router from "@/router";
  export default {
    name: "web_content",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        block_1_text: false,
        imgs_1: [{
            img: require("@/assets/page_two/2.png"),
            class: "page_1_2",
            name: "left",
            show: false,
          },
          {
            img: require("@/assets/page_two/3.png"),
            class: "page_1_3",
            name: "bottom",
            show: false,
          },
          {
            img: require("@/assets/page_two/4.png"),
            class: "page_1_4",
            name: "right",
            show: false,
          },
          {
            img: require("@/assets/page_two/page_mouse.png"),
            class: "page_mouse",
            name: "top",
            show: false,
          },
        ]
      };
    },
    props: {},
    mounted() {
      this.block_1_text = true;
    },
    methods: {

    },
  };
</script>
<style lang="scss" scoped>
  @import "./css.scss";

  .childPage {
    .block_1 {
      .page_1_2 {
        left: -130px;
        top: 90px;
      }

      .page_1_3 {
        left: 90px;
        top: 340px;
      }

      .page_1_4 {
        left: 630px;
        top: 90px;
      }

      .page_mouse {
        left: 190px;
        top: 150px;
        z-index: 10 !important;
      }
    }
  }

  @media screen and (max-width: 1400px) {
    .bc_img {
      margin-left: 150px;
    }
  }
</style>